<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片局部放大</title>
</head>

<body>
    <div id="left">
        <div id="box"></div>
        <!-- 添加一个遮罩层 cover -->
        <div class="cover"></div>
    </div>
    <div id="right">
        <img src="../img/8-17图片局部放大.jpg" id="pic">
    </div>
    <script>
        //图片的放大：一定是成倍数的放大，如：1/2，1/3，1/4,1/5，1/6。。。。的倍数进行放大。
        var left = document.getElementById('left');
        var box = document.getElementById('box');
        var right = document.getElementById('right');
        // var pic = document.getElementById('pic');
        //给 left元素绑定一个鼠标移动事件
        left.onmousemove = function (event) {
            //第一步：获取事件对象
            //event 代表事件的对象，例如触发 event 对象的元素、鼠标的位置及状态、按下的键等待。
            //event 对象只在事件发生过程中才有效，一旦事件处理程序执行完毕，event 对象就会被销毁。
            //event 对象获取的两种方式：
            // var ev = window.event;  // IE 浏览器的写法。
            // var ev = event;  // 其它浏览器的写法。
            //1.在事件处理程序中，作为参数传入
            //2.在全局作用域中，使用 window.event
            var ev = window.event || event;
            //第二步：获取鼠标于元素相对位置
            var mouse_left = ev.offsetX || ev.layerX;
            var mouse_top = ev.offsetY || ev.layerY;
            //box的位置：鼠标的位置 - box的宽度的一半
            var box_left = mouse_left - 100;
            var box_top = mouse_top - 100;

            box_left = box_left < 0 ? 0 : box_left;
            box_top = box_top < 0 ? 0 : box_top;
            box_left = box_left > 200 ? 200 : box_left;
            box_top = box_top > 200 ? 200 : box_top;
            //向浏览器的 title中输出
            document.title = (mouse_left + '|' + mouse_top);
            //让 box 动起来
            box.style.left = box_left + 'px';
            box.style.top = box_top + 'px';
            //第三步：让右边图片动起来
            pic.style.left = '-' + box_left * 2 + 'px';
            pic.style.top = '-' + box_top * 2 + 'px';
        };
        //第四步：设置显隐:
        //鼠标移入事件
        left.onmouseover = function () {
            box.style.display = 'block';
            right.style.display = 'block';
        }
        //鼠标移出事件
        left.onmouseout = function () {
            box.style.display = 'none';
            right.style.display = 'none';
        }
    </script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #left {
            width: 400px;
            height: 400px;
            background: url('../img/8-17图片局部放大.jpg') no-repeat;
            float: left;
            margin-left: 40px;
            margin-top: 20px;
            /* background-size: 400px 400px; */
            position: relative;
            cursor: crosshair;
            /* 设置鼠标样式：十字架 */
        }

        #box {
            width: 200px;
            height: 200px;
            background: #999;
            opacity: 0.5;
            /* 透明度 */
            position: absolute;
            top: 0;
            left: 0;
            display: none;
        }

        .cover {
            width: 400px;
            height: 400px;
            background: rgba(0, 0, 0, 0);
            position: absolute;
            top: 0;
            left: 0;
        }

        #right {
            width: 400px;
            height: 400px;
            float: left;
            margin-left: 200px;
            margin-top: 20px;
            position: relative;
            overflow: hidden;
            display: none;
        }

        #pic {
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</body>

</html>